/**
 * 构造一个表盘上的点
 */
function Dial(index,size,color){
    
    this.index = index;
    this.color = color || "black";

    Control.call(this);
    
   
}
Dial.prototype = Object.create(Control.prototype);
Dial.prototype.contructor = Dial;

/**
 * A类（子类）继承 B类 （父类）
 * 如果A类和B类含有同样的方法show或者属性
 * 操作：对象.show()
 * 如果这个对象是B类 那么执行的是B类的show方法
 * 如果。。。。。A类 那么执行的是A类的show方法
 */

// 覆盖父类的方法
// Dial.prototype.show = function(){
//     console.log("Dial---show");
//     // this.div.style.borderRadius = "50%";
// }

// 想要同时使用子类和父类的show方法
// 方式
Dial.prototype.show = function(){
    // console.log("dial ---show1")
    // 执行父类型的show方法
    // this.Control.prototype.show()
    // 使用this来执行Control的原型对象中show方法
    Control.prototype.show.call(this);

    // console.log("dial ---show2")
    this.div.style.borderRadius = "50%";
}

/**
 * 使表盘点重新布局
 */
Dial.prototype.layout = function(){
    var size = this.index%5 == 0 ? Control.r*0.1 : Control.r*0.05;
    this.div.style.width = size + "px";
    this.div.style.height = size + "px";
    
    var cx = Control.cx;
    var cy = Control.cy;
    var r = Control.r;
    // 圆上的点的坐标
    var x = cx + r*Math.cos(this.index*6*Math.PI/180);
    var y = cy + r*Math.sin(this.index*6*Math.PI/180);
    this.div.style.left= (x - size/2) + "px"
    this.div.style.top = (y - size/2) + "px";
}